<template>
	<view>
		<view class="status_bar"></view>
		<view class="header_created">
			<uni-nav-bar left-icon="back" :border="false" backgroundColor="transparent" :title="titles"
				@clickLeft="backs">
			</uni-nav-bar>
			<view class="header">
				<view class="head_portrait" @click="mycenter">
					<image class="photo" src="../../../static/logo.png" mode="aspectFill"></image>
					<image class="identity" src="../../../static/logo.png" mode="aspectFill"></image>
				</view>
				<view class="nickname">山东榴弹制烟花研发制造集团</view>
				<view class="autograph">身份名称·这里是个人简介/签名，只展示一行多余省略</view>
			</view>
			<view class="list_three">
				<view class="list_information">
					<text class="information_top">996</text>
					<text class="information_text">TA的粉丝</text>
				</view>
				<view class="list_information">
					<text class="information_top">14</text>
					<text class="information_text">TA的关注</text>
				</view>
				<view class="list_information" style="border-right:0">
					<text class="information_top">2344</text>
					<text class="information_text">TA发布的</text>
				</view>
			</view>
			<view class="list_tab">
				<view v-for="(item,index) in list" :class="['noactive',item.stasu==true ? 'active':'']"
					@click="active(index)">
					<text>{{item.name}}</text>
					<text :class="['',item.stasu==true ? 'lines':'']"></text>
				</view>
				<view class="noactive" style="color: #2B9CEF;float: right;margin-right: 0rpx;">
					<text @click="comment">寄售点评</text>
				</view>
			</view>
			<view class="shoplist">
				<view class="shop">
					<view class="">
						<image class="cover" src="../../../static/me/add_img.png" mode=""></image>
					</view>
						<view class="titles">这里是商品名称标题这里是商品名称标题这里是商品</view>
						<view class="moneys">¥2839.92</view>
					<view class="">
						<image class="photos" src="../../../static/home/ss-imgs1.png" mode=""></image>
						<text class="names">这里是用户名这…</text>
					</view>
					<view class="iconfont mores">&#xe657;</view>
				</view>
				<view class="shop">
					<view class="">
						<image class="cover" src="../../../static/me/add_img.png" mode=""></image>
					</view>
						<view class="titles">这里是商品名称标题这里是商品名称标题这里是商品</view>
						<view class="moneys">¥2839.92</view>
					<view class="">
						<image class="photos" src="../../../static/home/ss-imgs1.png" mode=""></image>
						<text class="names">这里是用户名这…</text>
					</view>
					<view class="iconfont mores">&#xe657;</view>
				</view>
				<view class="shop">
					<view class="">
						<image class="cover" src="../../../static/me/add_img.png" mode=""></image>
					</view>
						<view class="titles">这里是商品名称标题这里是商品名称标题这里是商品</view>
						<view class="moneys">¥2839.92</view>
					<view class="">
						<image class="photos" src="../../../static/home/ss-imgs1.png" mode=""></image>
						<text class="names">这里是用户名这…</text>
					</view>
					<view class="iconfont mores">&#xe657;</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						"name": '正规商品',
						"stasu": true
					},
					{
						"name": '寄售商品',
						"stasu": false
					},
					{
						"name": '易物商品',
						"stasu": false
					}
				]
			}
		},
		methods: {
			// 返回上一页
			backs() {
				uni.navigateBack({
					delta: 1
				});
			},
			active(i) {
				this.list.forEach((el, index) => {
					if (index == i) {
						el.stasu = true
					} else {
						el.stasu = false
					}
				})
			},
			// 寄售点评页面
			comment(){
				uni.navigateTo({
					url: 'comment'
				});
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		background: rgba(252, 218, 34, 1);
	}

	.header_created {
		width: 100%;
		height: 355rpx;
		background-image: url(../../../static/me/bj.png);
		background-size: 100% 355rpx;
	}

	.header {
		margin-left: 25rpx;
		margin-top: 36rpx;
		height: 101rpx;
		overflow: hidden;
	}

	.head_portrait {
		width: 101rpx;
		height: 101rpx;
		float: left;


	}

	.photo {
		width: 101rpx;
		height: 101rpx;
		border-radius: 50%;
	}

	.identity {
		width: 36rpx;
		height: 36rpx;
		position: relative;
		bottom: 43rpx;
		float: right;
		border-radius: 50%;
	}

	.nickname {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		padding-left: 25rpx;
		height: 34rpx;
		overflow: hidden;
		display: flex;
	}

	.autograph {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.65;
		padding-left: 25rpx;
		padding-top: 25rpx;
		overflow: hidden;
		display: flex;
	}

	.list_three {
		width: 699rpx;
		height: 173rpx;

		border-radius: 18rpx;
		background: #FFFFFF;
		margin: auto;
		margin-top: 32rpx;
	}

	.list_information {
		width: 231rpx;
		height: 72rpx;
		display: block;
		float: left;
		border-right: 1px solid #F5F5F5;
		margin-top: 54rpx;
	}

	.information_top {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #21201D;
		opacity: 1;
	}

	.information_text {
		margin-top: 10rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.35;
	}

	.information_top,
	.information_text {
		text-align: center;
		display: block;
	}

	/*  */
	.list_tab {
		width: 699rpx;
		margin: auto;
		margin-top: 57rpx;
		height: 50rpx;
	}

	.noactive {
		margin-right: 28rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.65;
		float: left;
		height: 54rpx;
		line-height: 54rpx;
	}

	.active {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #21201D;
		opacity: 1;
		margin-right: 28rpx;
		float: left;
		height: 54rpx;
		line-height: 54rpx;
	}

	.lines {
		width: 56rpx;
		height: 18rpx;
		background: #FCDA22;
		opacity: 1;
		border-radius: 9rpx;
		display: block;
		margin-top: -18rpx;
	}

	.shoplist {
		width: 699rpx;
		margin: auto;
		margin-top: 36rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap
	}
	.shop {
		width: 338rpx;
		height: 565rpx;
		opacity: 1;
		border-radius: 14rpx;
		float: left;
	}

	.cover {
		width: 338rpx;
		height: 338rpx;
	}

	.titles {
		width: 338rpx;
		height: 72rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 36rpx;
		color: #21201D;
		opacity: 1;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		margin-top: 18rpx;
	}

	.moneys {
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		margin-top: 18rpx;
	}

	.photos {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-top: 18rpx;
		float: left;
	}

	.names {
		width: 235rpx;
		overflow: hidden;
		height: 25rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 18rpx;
		color: #21201D;
		opacity: 0.65;
		padding-top: 26rpx;
		margin-left: 15rpx;
		display: inline-block;
		float: left;
	}

	.mores {
		color: #21201D;
		opacity: 0.35;
		float: right;
		margin-top: 23rpx;
	}
</style>
